import React, {useEffect} from "react";

function Center(props) {
    useEffect(() => {
        console.log(props);
    }, [props]);
    return <div>
        center
        <button onClick={() => props.history.push("/music")}>点击跳转</button>
    </div>
}

const mapStateToProps = () => {
    return {
        name: "小明",
        age: 15
    }
}

const mapDispatchToProps = {
    study() {
        return "我爱学习"
    },
    eat: () => {
        return "我想吃饭"
    }
}

// 自定义高阶函数 模仿connect
function simpleConnect(mapStateToProps, mapDispatchToProps) {
    const state = mapStateToProps()
    // 这一层是将Center组件传入函数
    return (MyComponent) => {
        // 这一层是将Center组件包装后 再次返回包装后的函数
        return (props) => {
            return <div style={{backgroundColor: "yellow"}}>
                {/*将<MyComponent/>看成执行Center函数组件 所以能拿到props*/}
                <MyComponent {...state} {...props} {...mapDispatchToProps}/>
            </div>
        }
    }
}
export default simpleConnect(mapStateToProps, mapDispatchToProps)(Center);